import React, { Component } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import { Button,Toast } from 'antd-mobile'
import ctx from '@/assets/js/ctx'

export class Register extends Component {
    static contextType = ctx

    constructor(){
        super()

        this.state = {
            selectVal:"中国",
            countryCode:'86',
            countryList:[
                {
                    value:"中国",
                    code:"86"
                },
                {
                    value:"美国",
                    code:"1"
                },
            ],

            tel:'',
            username:'',
            password:"",
            rappwd:'',
            yzcode:'',
            btnText:'获取验证码',
            isClick:false
        }

    }
    selectCountry = (ev) => {
        const {countryList} = this.state
        const selectVal = ev.target.value
        const selectCountry = countryList.filter(e => e.value==selectVal)[0]
        this.setState({
            selectVal,
            countryCode:selectCountry.code
        })
    }

    getTel = (ev) => {
        this.setState({
            tel:ev.target.value
        })
    }
    getName = (ev) => {
        this.setState({
            username:ev.target.value
        })
    }
    getPassword = (ev) => {
        this.setState({
            password:ev.target.value
        })
    }
    getRappwd = (ev) => {
        this.setState({
            rappwd:ev.target.value
        })
    }
    getCode = (ev) => {
        this.setState({
            yzcode:ev.target.value
        })
    }
    toLogin = () =>{
        this.props.history.push('/login')
    }

    sendCode = () =>{
        
        const {tel} = this.state
        if(!/^1(3[0-9]|4[5|7]|5[0|1|2|3|5|6|7|8|9]|8[0|1|2|3|5|6|7|8|9])\d{8}$/.test(tel)){
            Toast.fail('请输入正确的号码')
            return false
        }
        this.context.axios.post('/bulubulu/api/register/getCode',{
            tel
        })
        .then(({code,msg}) => {
            if(code == 1){
                this.setState({
                    isClick:true,
                    btnText:`再次获取(60s)`
                })
                
                let num =60;
                let timer = setInterval(() =>{
        
                    num--;
                    if(num >1){
                        this.setState({
                            btnText:`再次获取(${num}s)`
                        })
                    }else{
                        this.setState({
                            isClick:false,
                            btnText:'获取验证码'
                        })
                        
                        clearInterval(timer);
                    }
                },1000)
                Toast.success('验证码发送成功，请注意查收')
            }else{
                Toast.fail(msg)
            }
        })
    }
    onSubmit = () => {
        const {tel,username, password, rappwd,yzcode} = this.state
        if(!(tel&& username&&password)){
            Toast.fail('请输入内容')
            return false
        }
        const pwdReg = /^\w{6,12}$/
        if(!pwdReg.test(password)){
            Toast.fail('请按格式输入密码')
            return false
        }
        if(!(password === rappwd)){
            Toast.fail('两次密码不一致')
            return false
        }
        
        this.context.axios.post('/bulubulu/api/register/useCode',{
            username,
            password,
            tel,
            code:yzcode
        })
        .then(({code,msg})=>{
            if(code == 1){
                Toast.success(msg)
                this.props.history.push('/login')
            }else{
                Toast.fail(msg)
            }
        })
    }

    toHome = () =>{
        this.props.history.push('/home')
    }
    
    render() {
        const {selectVal,countryCode,countryList,btnText,isClick} = this.state
        const {selectCountry,toLogin,onSubmit,getCode,getRappwd,getPassword,getTel,getName,sendCode,toHome} = this
        return (
            <div className={styles.register}>
                <div className={styles.formGroup}>
                    <h1 className={classnames(styles.title,"bgcolor")} onClick={toHome}>注册bulubulu</h1>
                </div>
                <div className={classnames(styles.formGroup,styles.selectBox)}>
                    <select value={selectVal} onChange={selectCountry} className={styles.selectOption}>
                        {countryList.map((e,i) => <option key={i} value={e.value}>{e.value}</option>)}
                    </select>
                    <label className={classnames('iconfont','icon-gengduo',styles.more)}></label>
                </div>

                <ul className={styles.formGroup}>
                    <li className={classnames(styles.groupList,styles.bottomLine)}>
                        <span className={styles.inputTitle}>+{countryCode}</span>
                        <input type="text" className={styles.inputText} placeholder="请输入常用手机号" onChange={getTel}/> 
                        <button className={styles.yzCode} onClick={sendCode} disabled={isClick}>{btnText}</button>
                    </li>                    
                    <li className={styles.groupList} >
                        <span className={styles.inputTitle}>验证码</span>
                        <input type="text" className={styles.inputText} placeholder="请输入验证码" onChange={getCode}/> 
                    </li>                    
                </ul>

                <ul className={styles.formGroup}>
                    <li className={classnames(styles.groupList,styles.bottomLine)} >
                        <span className={styles.inputTitle}>昵称</span>
                        <input type="text" className={styles.inputText} placeholder="请输入用户名" onChange={getName}/> 
                    </li>                    
                    <li className={classnames(styles.groupList,styles.bottomLine)} >
                        <span className={styles.inputTitle}>密码</span>
                        <input type="password" className={styles.inputText} placeholder="6~16个字符，区分大小写" onChange={getPassword}/> 
                    </li>                    
                    <li className={styles.groupList} >
                        <span className={styles.inputTitle}>确认密码</span>
                        <input type="password" className={styles.inputText} placeholder="请确认密码" onChange={getRappwd}/> 
                    </li>                    
                </ul>

                <div className={styles.btnBox}>
                    <Button onClick={toLogin} className={styles.btn} style={{color:"#fb7299",border:"1px solid #fb7299",backgroundColor:"rgba(255, 255, 255, 0)"}}>登录</Button>
                    <Button onClick={onSubmit} className={styles.btn} style={{color:"#fff",backgroundColor:"#fb7299"}}>同意并注册</Button>
                </div>
                <p className={styles.tips}>完成注册即代表你同意<a href="https://www.bilibili.com/blackboard/account-useragreement.html" className={styles.color}>用户协议</a>和<a href="https://www.bilibili.com/blackboard/privacy-h5.html" className={styles.color}>隐私协议</a></p>
            </div>
            
        )
    }
}

export default Register
